<template>
  <div class="container-box">
    <el-steps :active="active" align-center finish-status="success" class="steps">
      <el-step title="設定專案密碼" description="請設定並牢記專案密碼"></el-step>
      <el-step title="連接網絡硬盤" description="請連接最少兩部專用網絡硬盤"></el-step>
      <el-step title="系統檢測" description="系統檢測專屬網絡硬盤連接"></el-step>
      <el-step title="核對編號" description="請核對你的組別所分配的追蹤器的編號"></el-step>
      <el-step :title="flag ? '配置成功' : '創建失敗'" description=""></el-step>
    </el-steps>
    <div ref="section1" v-show="tabShow[0]">
      <div class="form-box">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-position="right"
          label-width="80px"
          class="demo-ruleForm"
        >
          <h3 class="title">請設定專案密碼</h3>
          <!-- <el-form-item prop="name" label="專案名稱">
            <el-input type="text" v-model="ruleForm.name" placeholder="請輸入專案名稱" clearable></el-input>
          </el-form-item> -->
          <el-form-item prop="lawPwd" label="專案密碼">
            <el-input type="password" v-model="ruleForm.lawPwd" placeholder="請輸入專案密碼" clearable></el-input>
          </el-form-item>
          <el-form-item prop="reNewPassword" label="確認密碼">
            <el-input type="password" v-model="ruleForm.reNewPassword" placeholder="請再輸入一次" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div ref="section2" v-show="tabShow[1]">
      <h3 class="title ml50">請連接最少兩部專用網絡硬盤</h3>
      <netdisk-card v-model="netdiskId"></netdisk-card>
    </div>
    <div ref="section3" v-show="tabShow[2]">

    </div>
    <div ref="section4" v-show="tabShow[3]">
      <h3 class="title ml50">請分配追蹤器並核對編號</h3>
      <assets-card v-model="assetsId"></assets-card>
    </div>
    <div ref="section5" v-show="tabShow[4]">
      <h3 class="title ml50">{{ flag ? '配置成功' : '創建失敗' }}</h3>
      <h3 class="ml50">
        你正在使用網絡硬盤：<span class="baseColor">{{ showNetwork }}</span>, <font class="connectColor">運作正常</font>
      </h3>
      <h3 class="ml50">
        所配置的追蹤器的編號：<span class="baseColor">{{ showDish }}</span>
      </h3>
      <h3 class="ml50">
        專案號：<font class="connectColor">{{ itemNo }}</font>
      </h3>
      <div style="text-align: center;">
        <el-button type="primary" size="medium" @click="onToMap" :loading="loading" v-if="flag">進入地圖界面</el-button>
      </div>
    </div>
    <el-button type="primary" size="medium" @click="onNext" class="next" :disabled="flag"  :loading="loading">{{ buttonText }}</el-button>
  </div>
</template>

<script>
import NetdiskCard from './components/netdisk-card.vue'
import AssetsCard from './components/assets-card.vue'

export default {
  name: 'create-case',

  components: {
    [NetdiskCard.name]: NetdiskCard,
    [AssetsCard.name]: AssetsCard
  },

  data() {
    return {
      active: 0,
      flag: false,
      buttonText: '下一步',
      loading: false,
      ruleForm: {
        userId: '',
        name: '',
        facilitys: '',//设备id
        dishIds: '', //网盘id
        lawPwd: '',
        reNewPassword: ''
      },
      netdiskId: [
        { id: '', value: '', isConnect: false },
        { id: '', value: '', isConnect: false },
        { id: '', value: '', isConnect: false }
      ],
      assetsId: [],
      tabShow: [true, false, false, false, false],
      itemNo: ''//新创建的专案号
    }
  },

  computed: {
    facility: function() {
      let finId = this.netdiskId.map(item => item.id).join(',')
      if(finId.slice(0, 1) == ','){
        return finId.substring(1, finId.length)
      }
      return finId
    },

    dishId: function() {
      let disId = this.assetsId.map(item => item.facilityId).join(',')
      if(disId.substring(0, 1) == ','){
        return disId.substring(1, disId.length)
      }
      return disId
    },

    showDish: function() {
      let disName = this.assetsId.map(item => item.facilityName).join(',')
      if(disName.substring(0, 1) == ','){
        return disName.substring(1, disName.length - 1)
      }
      return disName
    },

    showNetwork: function() {
      let netName = this.netdiskId.map(item => item.value).join(',')
      if(netName.substring(0, 1) == ','){
        return netName.substring(1, netName.length - 1)
      }
      return netName
    }
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.userId = user.id || ''
    }
  },

  methods: {
    //下一步
    onNext() {
      this.loading = true
      // 分步处理
      if(this.active == 0) {//设定专案密码
        if(!this.ruleForm.lawPwd || !this.ruleForm.reNewPassword) {
          this.loading = false
          this.$message.error('專案密碼不能為空！')
          return false
        }
        let strongRegex = new RegExp("^(?!^[0-9a-z]+$)(?!^[0-9A-Z]+$)(?!^[0-9\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)(?!^[a-zA-Z]+$)(?!^[a-z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)(?!^[A-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)(?!^[A-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)[a-z0-9A-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$")
        if(!strongRegex.test(this.ruleForm.lawPwd) || this.ruleForm.lawPwd.length > 12 || this.ruleForm.lawPwd.length < 8) {
          this.loading = false
          this.$message.error('專案密碼必須為8-12位，並由數字，大小寫字母及特殊符號組成！')
          return false
        }
        //校验密码不一致
        if(this.ruleForm.lawPwd !== this.ruleForm.reNewPassword) {
          this.loading = false
          this.$message.error('兩次輸入的密碼不一致！')
          return false
        }
      }
      if(this.active == 1) {//连接网络硬盘
      //判断是否至少连接两部网盘
      // console.log(this.facility)
        let connectIndex = 0
        this.netdiskId.forEach(item => {
          if(item.id != '') connectIndex++
        })
        if(connectIndex <2) {
          this.loading = false
          this.$message.error('請至少連接兩部網盤！')
          return false
        }
      }
      // if(this.active == 2) {//系统检测
      //   openFullScreen
      // }
      if(this.active == 3) {//核对编号
        //提交创建案件
        this.$store.dispatch('netdisk/fetchAddLawCase',
        { ...this.ruleForm, dishIds: this.facility, facilitys: this.dishId }).then(res => {
          this.loading = false
          this.$message.success(res.message)
          this.itemNo = res.result.itemNo
          this.flag = true
          this.buttonText = 'ok'
        }).catch(err => {
          console.error(err)
          // this.loading = false
          this.$message.error('專案創建失敗!' + err)
          this.buttonText = 'fail'
          return false
        })
        this.active = 5 //到了配置成功后，直接跳成功
        //重置数组并显示当前页面
        this.$set(this, 'tabShow', [false, false, false, false, false])
        this.$set(this.tabShow, 4, true)
      } else {
        //index自增
        this.active++
        //重置数组并显示当前页面
        this.$set(this, 'tabShow', [false, false, false, false, false])
        this.$set(this.tabShow, this.active, true)
        if(this.active == 2) {
          //直接执行自检
          this.openFullScreen()
        }
      }
      this.loading = false
    },

    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: '系統自檢中...請稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      setTimeout(() => {
        loading.close()
        this.active++
        this.$set(this, 'tabShow', [false, false, false, false, false])
        this.$set(this.tabShow, 3, true)
      }, 1200)
    },

    //从专案创建页面打开地图
    onToMap() {
      this.$router.push({ name: 'mapIndex', params: { itemNo: this.itemNo } })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .el-steps {
    margin: 50px 0;
  }

  .next {
    margin: 50px;
    float: right;
  }

  .form-box {
    padding: 10px 50px;
  }

  .ml50 {
    margin-left: 50px;
  }
}

.baseColor {
  color: $baseColor;
}

.connectColor {
  color: $connectColor
}
</style>
